<template>
  <ul class="todo-list">
    <li @click.stop="checkTodoItem(item)" class="todo-item" v-for="item in todoList" :key="item.id">
      <span>{{ item.name }}</span>
      <span>{{ item.date }}</span>
    </li>
  </ul>
</template>

<script setup>
const props = defineProps({
  todoList: {
    type: Array,
    default: () => []
  }
})
function checkTodoItem(item) {
  showToast('跳转到对应的待办页面')
}
</script>

<style scoped lang="scss">
.todo-list{
  margin-top: 10px;
  .todo-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    cursor: pointer;

    &:hover {
      color: $theme-color;
    }
  }
}
</style>
